<template>
  <el-table v-loading="loading" :data="tableData" border>
    <el-table-column type="index" />
    <el-table-column label="用户类型" align="center" min-width="150">
      <template #default="scope">
        <el-select v-model="scope.row.userType" @change="updateRow(scope.row)">
          <el-option value="0" label="普通会员" />
          <el-option value="1" label="会员" />
        </el-select>
      </template>
    </el-table-column>
    <!--    <el-table-column label="是否允许退订" align="center" min-width="150">
      <template #default="scope">
        <el-select v-model="scope.row.canCancle" @change="updateRow(scope.row)">
          <el-option value="0" label="不可以退订" />
          <el-option value="1" label="可以退订" />
        </el-select>
      </template>
    </el-table-column> -->
    <el-table-column label="退订规则（时间）" align="center" min-width="250">
      <template #default="scope">
        <el-input v-model="scope.row.cancelPeriod" type="number" @blur="updateRow(scope.row)">
          <template #prepend>
            开始前
          </template>
          <template #append>
            小时
          </template>
        </el-input>
      </template>
    </el-table-column>
    <!--    <el-table-column label="退订次数限制" align="center" min-width="260">
      <template #default="scope">
        <div class="tdFlex">
          <el-select v-model="scope.row.cancelLimitType" class="mr10" @change="updateRow(scope.row)">
            <el-option value="0" label="每日" />
            <el-option value="1" label="累计" />
            <el-option value="2" label="无" />
          </el-select>
          <el-input v-model="scope.row.cancelLimitTime" type="number" @blur="updateRow(scope.row)">
            <template #append>
              次
            </template>
          </el-input>
        </div>
      </template>
    </el-table-column> -->
    <el-table-column label="退订金额" align="center" min-width="120">
      <template #default="scope">
        <el-select v-model="scope.row.refundPercent" @change="updateRow(scope.row)">
          <el-option :value="100" label="全额" />
          <el-option :value="90" label="90%" />
          <el-option :value="80" label="80%" />
          <el-option :value="70" label="70%" />
          <el-option :value="60" label="60%" />
          <el-option :value="50" label="50%" />
        </el-select>
      </template>
    </el-table-column>
    <!--    <el-table-column label="是否允许退费" align="center" min-width="130">
      <template #default="scope">
        <el-select v-model="scope.row.refundAllow" @change="updateRow(scope.row)">
          <el-option value="0" label="否" />
          <el-option value="1" label="是" />
        </el-select>
      </template>
    </el-table-column> -->
    <el-table-column label="操作" prop="roleId" width="60" fixed="right">
      <template #default="scope">
        <el-button type="text" @click="removeRow(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-button type="primary" plain class="mt20" @click="addSet">新增规则</el-button>
</template>

<script setup>
import { ref } from 'vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import { getCancelRuleList, modifyCancelRule, delCancelRule } from '../../../../api/oam/basic'
import useUserStore from '../../../../store/modules/user'

const user = useUserStore().user
const { proxy } = getCurrentInstance()
const loading = ref(true)
const tableData = ref([])

onMounted(() => {
  getCancelRuleList().then((data) => {
    tableData.value = data.rows
    loading.value = false
  })
})

function addSet() {
  tableData.value.push({
    templateFlag: user.manageFlag == 1 ? 0 : (user.manageFlag == 2 ? 0 : -1),
    venueId: user.venueId,
    userType: '0',
    // canCancle: '1',
    // cancelLimitType: '0',
    refundAllow: '1',
    refundPercent: 100
  })
}

function updateRow(row) {
  // if (row.cancelPeriod && row.cancelLimitTime) {
  row.venueId = user.venueId
  modifyCancelRule(row).then(res => {
    if (!row.id) {
      row.id = res.data
    }
  })
  // }
}

function removeRow(id) {
  proxy.$modal
    .confirm('是否确认删除?')
    .then(() => {
      if (id) {
        return delCancelRule(id)
      }
    })
    .then(() => {
      _.remove(tableData.value, (val) => {
        return val.id === id
      })
      proxy.$modal.msgSuccess('删除成功')
    })
}
</script>

<style scoped>
.mt20{margin-top: 20px;}
.mr10{margin-right: 10px;}
.mr-4{margin-right: 4px;}
.tdFlex{display: flex;}
</style>
